<!--
 * @Author: wangming
 * @Date: 2021-05-29 15:44:34
 * @LastEditors: wangming
 * @LastEditTime: 2022-05-05 17:24:22
 * @Description: file content
-->
<template>
  <div>
    <el-form-item label="绑定数据字段">
      <el-input v-model="value.name" size="small" disabled></el-input>
    </el-form-item>
    <el-form-item label="标题" prop="title">
      <GlobalizationConfigWord
        class="mr10"
        @setLangCode="(title_i18n) => $set(value, 'title_i18n', title_i18n)"
        :localism="value.title_i18n"
      ></GlobalizationConfigWord>
      <el-input v-model="value.title" size="small"></el-input>
    </el-form-item>
    <el-form-item label="列宽配置">
      <el-radio-group v-model="value.widthType">
        <el-radio label="1">自适应页面宽度</el-radio>
        <el-radio label="2">固定页面宽度</el-radio>
      </el-radio-group>
      <el-input-number
        v-if="value.widthType === '2'"
        size="small"
        style="width: 100%"
        v-model="value.width"
        controls-position="right"
        :min="1"
      ></el-input-number>
    </el-form-item>
    <!-- 表头说明 -->
    <el-form-item label="表头说明">
      <div class="ks-row-middle-between">
        <div>
          <GlobalizationConfigWord
            @setLangCode="(v) => $set(value, 'explainValue_i18n', v)"
            :localism="value.explainValue_i18n"
            v-if="value.showExplain"
          ></GlobalizationConfigWord>
        </div>
        <el-switch v-model="value.showExplain"> </el-switch>
      </div>
      <el-input
        v-if="value.showExplain"
        type="textarea"
        :autosize="{ minRows: 3 }"
        v-model="value.explainValue"
        placeholder="请输入内容"
        maxlength="300"
        show-word-limit
      ></el-input>
    </el-form-item>
    <el-form-item label="开启搜索" v-if="value.searchStatus === 1">
      <el-switch v-model="value.showSearch" />
    </el-form-item>
    <el-form-item label="日期类型" v-if="value.type === 'DATE'">
      <el-select
        v-model="value.format"
        placeholder="请选择"
        style="width: 100%"
      >
        <el-option
          :label="item.label"
          :value="item.format"
          v-for="(item, index) in dateConfig"
          :key="index"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="统计" class="tr" v-if="showTotal">
      <el-input
        v-if="value.showSummary"
        class="mr10"
        style="width: 160px"
        :value="value.formulaText"
        placeholder="公式="
        readonly
        @click.native="openFormulaModule"
      ></el-input>
      <el-switch v-model="value.showSummary" />
    </el-form-item>
    <el-form-item
      label="统计类型"
      v-if="value.showSummary && showTotal"
      class="tr"
    >
      <el-select
        v-model="value.summaryType"
        placeholder="请选择"
        style="width: 160px"
      >
        <el-option
          :label="item.label"
          :value="item.value"
          v-for="(item, index) in SUMMARY_TYPE"
          :key="index"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="自定义渲染" class="tr">
      <el-switch v-model="value.isRender" />
    </el-form-item>
    <div v-show="value.isRender">
      <el-button
        @click="editJsx"
        type="primary"
        icon="el-icon-edit"
        plain
        size="mini"
        >代码编辑</el-button
      >
    </div>
  </div>
</template>

<script>
import basicmixins from "../basicmixins";
import monacoEditor from "./monacoEditor/index.js";
import { dateConfig } from "@/utils/dateLimitTypeList";
import { SUMMARY_TYPE } from "@/utils/enum";
import { openFormula } from "./__components__/formula/index";
const template = `/**
 *
 * @param {*} h 系统预留字段
 * @param {*} param1  {
 * row：点击列数据,
 * index:索引,
 * seqIndex:序号,
 * column:字段对象属性,
 * context:页面工具类对象,
 * operater:Function 表格默认操作事件
 * }
 * 例:operater(type,query)  调用以后触发表单内置事件 type:操作类型 ，query：页面跳转时候用到的自定义参数
 * 例:type枚举  'delete' 删除  'edit'  跳转表单页面  'processEdit' 流程配置  'processInfo' 流程查看
 * @param {*} rootScope  页面公共事件对象
 * @returns
 */
function render(h, { row, index,seqIndex,column,context },rootScope) {
  return <div>{row[column.code]}</div>
}`;
export default {
  mixins: [basicmixins],
  watch: {
    "value.showSummary": function (v) {
      if (v) {
        this.value.summaryType = this.value.summaryType || "sum";
        if (v && !this.value.formulaText) {
          this.$set(this.value, "formulaText", "value");
          const defaultList = [
            { key: undefined, label: "value", type: "component" },
          ];
          this.$set(this.value, "resultFormulaList", defaultList);
        }
      }
    },
    "value.isRender": {
      handler(val) {
        if (val && this.value.renderJsx === "") {
          this.value.renderJsx = template;
        }
      },
    },
  },
  computed: {
    showTotal() {
      return (
        ["NUMBER", "INTEGER"].indexOf(this.value.type) > -1 &&
        this.value.__showSummary__
      );
    },
  },
  data() {
    return {
      editComponents: [{ label: "", value: "" }],
      dateConfig,
      SUMMARY_TYPE,
    };
  },
  methods: {
    editJsx() {
      let jsx = this.value.renderJsx || template;
      monacoEditor.showEdit(decodeURIComponent(jsx)).then((res) => {
        this.value.renderJsx = encodeURIComponent(res);
      });
    },
    openFormulaModule() {
      const { resultFormulaList, resultPrefix, resultSuffix } = this.value;
      openFormula(resultFormulaList, resultPrefix, resultSuffix).then(
        (list, prefix, suffix, text) => {
          this.$set(this.value, "formulaText", text);
          this.$set(this.value, "resultPrefix", prefix);
          this.$set(this.value, "resultSuffix", suffix);
          this.$set(this.value, "resultFormulaList", list);
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
</style>
